//需要先运行一个命令 npm init和npm install
const path = require('path') //获取绝对路径

module.exports = {
	entry: './src/main.js', //js文件入口
	output: { //导出配置
		path: path.resolve(__dirname, 'dist'), //导出文件路径
		filename: 'bundle.js', //文件名称
		publicPath: 'dist/', //url打包时自动在前面加上dist 文件名
	},
	module: {
		rules: [
			// css-loader
			{
				test: /\.css$/,
				// css-loader只负责将css文件进行加载
				// style-loader 负责将样式添加到DOM中
				//使用多个loader时,是从右到左读取的
				use: ['style-loader', 'css-loader']
			},
			//less-loader
			{
				test: /\.less$/,
				use: [{
					loader: "style-loader" // creates style nodes from JS strings
				}, {
					loader: "css-loader" // translates CSS into CommonJS
				}, {
					loader: "less-loader" // compiles Less to CSS
				}]
			},
			//url-loader 
			{
				test: /\.(png|jpg|gif|jpeg)$/,
				use: [{
					loader: 'url-loader',
					options: {
						//当加载的图片,小于limit时,会将图片编译成base64字符串的形式。
						//当加载的图片,大于limit时,需要使用file-loader模块进行加载。
						limit: 8192,
						name: 'img/[name].[hash:8].[ext]' //img/：文件名称 name：原来文件文件名称 hash:8 保留8位hash码 ext：原文件后缀
					},

				}]
			},
			{
				test: /\.js$/,
				//exclude：排除
				//include：包含
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['es2015']
					}
				}
			}
		]
	}
}
